<template>
    <div class="app-container">
        <div class="chart-wrapper">
            <div>
                <VChart :option="options" @click="handleChartClick" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, nextTick, ref } from 'vue';

import VChart from "vue-echarts";
import { use } from "echarts";
import { GridComponent } from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { UniversalTransition } from "echarts/features";
import useSettingsStore from "@/store/modules/settings.js";
// import {getSendPoliceTrendOfSendPolice} from "@/api/StatisticAnalysis/CityResumptionChart.js";

use([GridComponent, BarChart, CanvasRenderer, UniversalTransition]);

const settingsStore = useSettingsStore();


const options = ref({});

onMounted(() => {
    nextTick(() => {
        setChartsData(
            ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            [100, 120, 150, 100, 100, 120, 150, 100, 100, 120, 150, 100], // 模拟的借读量数据
            [200, 210, 230, 180, 190, 220, 240, 210, 200, 230, 250, 220]  // 模拟的总数量数据
        );
    });
});

// 获取数据
const getData = async () => {
    // const res = await getSendPoliceTrendOfSendPolice();
    // 上面的模拟数据直接传入了，这里可以启用实际的 API 数据
    setChartsData(
        ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        [100, 120, 150, 100, 100, 120, 150, 100, 100, 120, 150, 100], // 模拟的借读量数据
        [200, 210, 230, 180, 190, 220, 240, 210, 200, 230, 250, 220]  // 模拟的总数量数据
    );
}

const handleChartClick = (params) => {
    // if (params.componentType === 'series') {
    //     alert('需要刷新页面');
    // }
}

// 设置图表数据
const setChartsData = (xData, thisYear, lastYear) => {
    options.value = {
        title: {
            text: '档案借阅率',
            subtext:'本年度每个月档案借阅量和档案总数量双柱状图',
            left: 'center',
            top: 0,
            right: 0,
            bottom: 0
        },
        
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow' // 更改为柱状图的阴影指示器
            }
        },
        grid: {
            left: 30,
            right: 30,
            top: 80,
            bottom:0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xData, // 月份数据
        },
        yAxis: {
            type: 'value',
            name: '数量(本)', // 修改Y轴标题为 '数量(本)'
            axisLabel: {
                formatter: '{value}' // 格式化为数字
            }
        },
        legend: {
            data: ['档案借读量', '档案总数量'], // 设置图例项，自动生成两个小标点按钮
            orient: 'horizontal', // 水平排列
            right: '30', // 放置位置
            top: '0', // 距离底部10%
            textStyle: {
                fontSize: 14, // 设置字体大小
                color: '#333' // 设置字体颜色
            }
        },
        series: [
            {
                name: '档案借读量',
                data: thisYear,
                type: 'bar', // 类型改为 bar（柱状图）
                barWidth: '35%', // 设置柱子宽度
                itemStyle: {
                    color: '#4caf50' // 设置柱子颜色
                }
            },
            {
                name: '档案总数量',
                data: lastYear,
                type: 'bar', // 类型改为 bar（柱状图）
                barWidth: '35%', // 设置柱子宽度
                itemStyle: {
                    color: '#2196f3' // 设置柱子颜色
                }
            }
        ]
    }
}
</script>

<style scoped lang="scss">
.app-container {
    height: calc(100vh - 114px);
    padding-bottom: 20px;
}

.chart-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    height:100%;
    gap: 20px;

    > div {
        position: relative;
        overflow: hidden;
    }
}
</style>
